<template>
<div>
	<ul class="breadcrumb">
      <li class="">
      	头像挂件
      </li>
    </ul>
    <div class="biaoqing-container">
    	<div class="biaoqing-table pt-3">
	    	<div @click="openAdd" class="btn cursor btn-outline-success btn-sm">
	    		<i class="fa fa-plus-circle mr-2"></i>添加挂件
	    	</div>
    	</div>
    	<div class="pt-3 clearfloat">
			<div @mouseenter="deleteBlock" @mouseleave="deleteNone" v-for="(pendant,index) in pendants.items" class="sticker-item clearfloat fl mr-2 mb-2 pr cursor">
				<span class="sticker-item-img fl"><img :src="'http://img.biaoqing.com/'+pendant.effect"></span>
				<span class="sticker-item-name fl" :title="pendant.name">{{pendant.name}}</span>
				<!-- <div @click="setRank(sticker.id,index)" class="sticker-number">{{sticker.rank}}</div> -->
				<div @click="deletePendant(pendant.id)" class="cursor delete-face">删除</div>
			</div>
		</div>
		<Pagepublic :pages="pendants" @paging="laodPendant"></Pagepublic>
    </div>
    <!-- 添加贴纸 -->
    <div class="add-banner-mask" :class="{'none':add==false}">
		<div class="add-banner-mask-bg" @click="closeAdd"></div>
		<div class="add-banner-mask-main">
			<div class="add-banner-mask-container pr flex">
				<input class="up-banner" type="file" accept="image/png,image/gif,image/jpeg" @change="upAddPendantCover" multiple>
				<img class="add-img" :src="addThumb" alt="上传封面">
			</div>
			<div class="add-banner-mask-input mb-3 mt-2">
				<div class="md-form-group pr" :class="[addResource==''?'md-float-label':'']" style="padding-bottom:0;">
					<input class="up-banner" type="file" accept="application/zip" @change="upAddZip" style="z-index:7;" multiple>
		          <input class="md-input pr" v-model="addResource"><label>点击上传zip文件</label>
		        </div>
			</div>
			<div class="add-banner-mask-input mb-3 mt-2">
				<div class="md-form-group pr" :class="[addName==''?'md-float-label':'']" style="padding-bottom:0;">
		          <input class="md-input pr" v-model="addName" > <label>标题</label>
		        </div>
			</div>
			<div class="add-banner-mask-btn mt-3">
				<button @click="closeAdd" class="btn mr-3 btn-secondary">取消</button>
				<button @click="addPendant" class="btn btn-primary">创建</button>
			</div>
		</div>
	</div>
</div>
</template>
<script>

import { TopicManage } from '../../resources'
import { formatTime } from '../../misc/utils'
import Pagepublic from '../../widgets/pagepublic.vue'
import swal2 from 'sweetalert2'
import querystring from 'querystring'
import Uploader from '../../misc/uploader'
var uploader = new Uploader('https://v0.api.upyun.com/biaoqingimg')

export default {
	data: () => ({
		loading: false,
		logs:'',
		pendants:'',
		add:false,
		addThumb:'',
		addResource:'',
		upArry:[],
		addName:'',
		page:'',
		options:{

		}
	}),
	beforeRouteEnter(to,form,next){
		var params = {
			pageNum:1,
			pageSize:60
		}
		next( vm => {
			vm.$http.get('/pendant',{params:params}).then( res => {
				
				vm.pendants=res.data.data;
			})
		})
	},
	mounted(){
		this.$emit('loaded')
	},
	methods:{
		openAdd(){this.add=true},
		closeAdd(){this.add=false},
		deleteNone(){$('.delete-face').css('display','none')},
    	deleteBlock(e){
    		$(e.target).find('.delete-face').css('display','block')
    	},
    	deletePendant(id){
    		var $this = this;
    		swal({
    			type:"warning",
    			title:'你确定？',
    			text:'删除的记录将不能恢复',
    			showCancelButton: true,
			    cancelButtonText: '取消',
			    confirmButtonText: '确定',
			    confirmButtonColor: '#DD6B55',
			    showLoaderOnConfirm: true,
			    closeOnConfirm: false
    		},function(){
    			$this.$http.delete('/pendant/'+id).then(res =>{
	    			if(res.data.code==200){
	    				$this.laodPendant()
	    				$this.$notice.success('删除成功')
	    			}else{
	    				$this.$notice.error(res.data.msg)
	    			}
	    		})
    			swal.close()
    		})
    	},
    	laodPendant(page){
    		var params = {
				pageNum:page || 1,
				pageSize:60
			}
			this.$emit('loaded',true)
    		this.$http.get('/pendant',{params:params}).then( res => {
    			this.$emit('loaded',false)
    			this.page = params.page;
				this.pendants=res.data.data;
			})
    	},
		upAddPendantCover(e){
			var that = this;
			var key="user/pendantcover/"+uploader.bannergetFileName(e.target.files[0].name);
			uploader.addFile(e.target.files,key).then(([img,file,fileOption])=>{
				that.addThumb=img.src;
				that.upArry.push(fileOption);
			})
		},
		//上传源文件
    	upAddZip(e){
    		var that = this;
			var key="user/pendant/"+uploader.bannergetFileName(e.target.files[0].name);
			uploader.addFile(e.target.files,key).then(([file,fileOption])=>{
				if(file.type=='application/x-zip-compressed' || file.type=="application/zip"){
					that.addResource=file.name;
					that.upArry.push(fileOption);
				}else{
					that.$notice.error('格式不正确')
				}
				
			})
    	},
    	addPendant(){
    		var that = this;
    		var addThumb =this.addThumb;
			var addResource =this.addResource;
			var data={
			  "effect": '',
			  "pendant": '',
			  "name":this.addName
			}
			if(addThumb != '' && addResource != ''){
    			that.upArry.forEach(item=>{
    				that.$emit('loaded',true);
    				uploader.start(item.file, item.options,function(res){
    					if(res.url.includes('pendantcover')){
    						data.effect=res.url;
    					}else if(res.url.includes('pendant')){
    						data.pendant=res.url;
    					}
    					// 检测是否长传成功
    					if(data.effect && data.pendant){
    						that.$http.post('/pendant',data).then(res => {
    							that.$emit('loaded',false);
								if(res.data.code==200){
									that.addThumb='';
									that.addResource='';
									that.addName = '';
									that.upArry=[];
									that.$notice.success('新增成功')
									that.add=false;
									that.laodPendant();
								}else{
									that.$notice.error(res.data.msg);
								}
							})
    					}
				    	
				    })
    			})
			}else{
				that.$notice.error('不能为空')
			}
    	}
	},
	components:{Pagepublic}

}
</script>
<style>	
	.delete-face{
		position: absolute;
		right: 3px;
		top: 3px;
		background: #e73849;
		color: #fff;
		border-radius: 3px;
		font-size: 12px;
		padding: 2px 5px;
		display: none;
	}
	.face-tip{
		position: absolute;
		right: 0;
		font-size: 13px;
		display: inline-block;
		line-height: 31px;
		color: #999;
		margin-left: 30px;
	}
	.sticker-number{
		position: absolute;
		left: 2px;
		top: 2px;
		color: #007bff;
		background: #f5f5f5;
		width: 23px;
		height: 23px;
		text-align: center;
		line-height: 23px;
		font-size: 14px;
		border-radius: 100%;
	}
	.delete-face:hover{
		background: #dc3545;
	}
	.sticker-item{
		width: 100px;
		border: 1px solid #eee;
	}
	.sticker-item:first-child{
		margin-left: 0 !important;
	}
	.sticker-item-img{
		width: 100px;
		height: 100px;
		display: block;
		border-bottom: 1px solid #eee;
	}
	.sticker-item-img img{
		max-width: 100px;
		max-height: 100px;
		display: block;
		margin: 0 auto;
	}
	.sticker-item-name{
		text-align: center;
		width: 100%;
		font-size: 14px;
		color: #999;
		display: block;
		height: 21px;
		width: 100%;
		text-overflow: ellipsis;
	    overflow: hidden;
	}
	.none{
		display: none;
	}
	.add-banner-mask{
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 50;
	}
	.add-banner-mask-bg{
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 48;
		background: rgba(0,0,0,.2)
	}
	.add-banner-mask-main{
		width: 395px;
		position: absolute;
		top: 30%;
		left: 50%;
		margin-left: -200px;
		background: #fff;
		z-index: 49;
		padding: 10px;

	}
	.add-banner-mask-container{
		width: 120px;
		height: 120px;
	}
	.add-banner-mask-btn{
		text-align: center;
	}
	.add-banner-mask-container img{
		text-align: center;
		font-size: 16px;
		line-height: 120px;
		color: #fff;
		width: 100%;
		height: 100%;
		background: #ccc;
	}
	
</style>